<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战平台 - API测试</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
        }
        
        .header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        .content {
            padding: 30px;
        }
        
        .api-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        
        .api-section h3 {
            margin-top: 0;
            color: #667eea;
            font-size: 1.3em;
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin: 15px 0;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
            color: white;
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(86, 171, 47, 0.3);
        }
        
        .btn-info {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }
        
        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }
        
        .response-area {
            margin-top: 20px;
            padding: 15px;
            background: #2c3e50;
            color: #ecf0f1;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            min-height: 100px;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        
        .status-success {
            color: #2ecc71;
            font-weight: bold;
        }
        
        .status-error {
            color: #e74c3c;
            font-weight: bold;
        }
        
        .api-info {
            background: #e8f4fd;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .api-info code {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎮 五子棋在线对战平台</h1>
            <p>后端API接口测试工具</p>
        </div>
        
        <div class="content">
            <div class="api-section">
                <h3>🚀 API接口测试</h3>
                <p>点击下方按钮测试后端API接口是否正常工作</p>
                
                <div class="button-group">
                    <button class="btn btn-primary" onclick="testHello()">
                        测试 Hello World
                    </button>
                    <button class="btn btn-success" onclick="testHealth()">
                        测试 健康检查
                    </button>
                    <button class="btn btn-info" onclick="testActuator()">
                        测试 系统监控
                    </button>
                </div>
                
                <div class="api-info">
                    <strong>API接口信息：</strong><br>
                    • Hello World: <code>GET /api/hello</code><br>
                    • 健康检查: <code>GET /api/health</code><br>
                    • 系统监控: <code>GET /actuator/health</code>
                </div>
                
                <div class="loading" id="loading">
                    <div class="spinner"></div>
                    <p>正在调用API接口...</p>
                </div>
                
                <div class="response-area" id="response">
                    等待API调用结果...
                </div>
            </div>
            
            <div class="api-section">
                <h3>📖 使用说明</h3>
                <p>
                    1. 确保后端服务已启动 (默认端口: 8080)<br>
                    2. 点击上方按钮测试不同的API接口<br>
                    3. 查看下方响应区域的返回结果<br>
                    4. 绿色状态表示请求成功，红色状态表示请求失败
                </p>
            </div>
        </div>
    </div>

    <script>
        const responseArea = document.getElementById('response');
        const loading = document.getElementById('loading');
        
        function showLoading() {
            loading.style.display = 'block';
            responseArea.textContent = '';
        }
        
        function hideLoading() {
            loading.style.display = 'none';
        }
        
        function displayResponse(data, isSuccess = true) {
            hideLoading();
            const timestamp = new Date().toLocaleString();
            const status = isSuccess ? '✅ 成功' : '❌ 失败';
            const statusClass = isSuccess ? 'status-success' : 'status-error';
            
            responseArea.innerHTML = `
<span class="${statusClass}">[${timestamp}] ${status}</span>

${typeof data === 'object' ? JSON.stringify(data, null, 2) : data}
            `;
        }
        
        async function testHello() {
            showLoading();
            try {
                const response = await fetch('/api/hello');
                if (response.ok) {
                    const data = await response.text();
                    displayResponse(data, true);
                } else {
                    displayResponse(`HTTP ${response.status}: ${response.statusText}`, false);
                }
            } catch (error) {
                displayResponse(`网络错误: ${error.message}`, false);
            }
        }
        
        async function testHealth() {
            showLoading();
            try {
                const response = await fetch('/api/health');
                if (response.ok) {
                    const data = await response.text();
                    displayResponse(data, true);
                } else {
                    displayResponse(`HTTP ${response.status}: ${response.statusText}`, false);
                }
            } catch (error) {
                displayResponse(`网络错误: ${error.message}`, false);
            }
        }
        
        async function testActuator() {
            showLoading();
            try {
                const response = await fetch('/actuator/health');
                if (response.ok) {
                    const data = await response.json();
                    displayResponse(data, true);
                } else {
                    displayResponse(`HTTP ${response.status}: ${response.statusText}`, false);
                }
            } catch (error) {
                displayResponse(`网络错误: ${error.message}`, false);
            }
        }
        
        // 页面加载完成后自动测试连接
        window.addEventListener('load', function() {
            setTimeout(() => {
                responseArea.textContent = '页面加载完成，可以开始测试API接口。\n\n提示：请确保后端服务已启动 (mvn spring-boot:run)';
            }, 500);
        });
    </script>
</body>
</html> 